import { Form, Input, Button, Checkbox, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { useRef, useState } from "react";
import { withRouter } from "react-router-dom";
import { reqLogin } from "@/api/index.js";
import memoryUtils from "@/utils/memory.js";
import storeUtils from "@/utils/storeUtils.js";
const NormalLoginForm = (props) => {
  const [wait, setWait] = useState(false);
  const myForm = useRef(null);
  onsubmit = () => {
    const { validateFields } = myForm.current;
    validateFields().then(
      async (res) => {
        setWait(true);
        const { username, password } = res;
        const response = await reqLogin({ username, password });
        if (response.status === 0) {
          message.success("登录成功");
          memoryUtils.user = response.data;
          storeUtils.setUser(response.data)
          props.history.replace("/");
        } else {
          setWait(false);
          return message.error(response.msg);
        }
      },
      (err) => {
        return message.error(err.message);
      }
    );
  };
  return (
    <Form
      name="normal_login"
      className="login-form"
      initialValues={{
        remember: true,
      }}
      ref={myForm}
      // onFinish={onFinish}
    >
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: "Please input your Username!",
          },
          {
            min: 4,
            message: "最低不少于四个字",
          },
        ]}
      >
        <Input
          prefix={<UserOutlined className="site-form-item-icon" />}
          placeholder="Username"
        />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: "Please input your Password!",
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="Password"
        />
      </Form.Item>
      <Form.Item>
        <Form.Item name="remember" valuePropName="checked" noStyle>
          <Checkbox>Remember me</Checkbox>
        </Form.Item>

       
      </Form.Item>

      <Form.Item>
        <Button
          disabled={wait}
          type="primary"
          htmlType="submit"
          className="login-form-button"
          onClick={onsubmit}
        >
          Log in
        </Button>
      </Form.Item>
    </Form>
  );
};
export default withRouter(NormalLoginForm);
